<template>
  <div class="content" id="bottom">
    <div class="top">
      <router-link to="/my">
        <img src="../../assets/首页.png" alt="" style="height: 19px"
      /></router-link>
      <span>我的订单</span>
    </div>
    <van-tabs v-model="active">
      <van-tab title="全部">
        <div
          class="test"
          v-for="(item, index) in List"
          :key="index"
          @click="isorder(item)"
        >
          <div class="top1">
            <div
              v-if="img.imgUrl.length >= 1"
              v-for="(img, index) in item.carts"
            >
              <img :src="img.imgUrl" alt="" />
            </div>
            <div class="right" v-else>
              <span>{{ img.masterName }}</span>
              <div class="bottom">
                <span>￥{{ img.price / 100 }}</span>
                <span>x{{ img.buyNum }}</span>
              </div>
            </div>
          </div>
          <div class="minten">
            <span style="padding-right: 10px">共件商品</span>
            <span> 实付:</span>
            <span style="color: tomato"
              >￥{{ (item.carts[0].buyNum * item.carts[0].price) / 100 }}</span
            >
          </div>
          <div class="bootom">
            <span v-if="isshow(item.orderStatus)">
              剩余支付时间:<van-count-down :time="paytime(item.createTime)"
            /></span>
            <span v-else>订单状态：已取消</span>
            <input
              type="button"
              value="重新购买"
              style="height: 33px; width: 86px"
            />
          </div></div
      ></van-tab>
      <van-tab title="待付款">
        <div
          class="test"
          v-for="(item, index) in Nopay"
          :key="index"
          @click="isorder(item)"
        >
          <div class="top1">
            <div
              v-if="img.imgUrl.length >= 1"
              v-for="(img, index) in item.carts"
            >
              <img :src="img.imgUrl" alt="" />
            </div>
            <div class="right" v-else>
              <span>{{ img.masterName }}</span>
              <div class="bottom">
                <span>￥{{ img.price / 100 }}</span>
                <span>x{{ img.buyNum }}</span>
              </div>
            </div>
          </div>
          <div class="minten">
            <span style="padding-right: 10px">共件商品</span>
            <span> 实付:</span>
            <span style="color: tomato"
              >￥{{ (item.carts[0].buyNum * item.carts[0].price) / 100 }}</span
            >
          </div>
          <div class="bootom">
            <span v-if="isshow"
              >剩余支付时间: <van-count-down :time="paytime(item.createTime)"
            /></span>
            <span v-else>订单状态：已取消</span>
            <input
              type="button"
              value="重新购买"
              style="height: 33px; width: 86px"
            />
          </div></div
      ></van-tab>
      <van-tab title="待发货"></van-tab>
      <van-tab title="已取消"></van-tab>
    </van-tabs>
  </div>
</template>

<script>
import $axios from "@/api/request";
export default {
  data() {
    return {
      active: 0,
      List: [],
      imgUrl: "",
      time: this.$route.query.time,
      Nopay: [],
    };
  },
  created() {
    this.myoredr();
  },

  methods: {
    isshow(state) {
      if (!(state == "02")) {
        return false;
      } else {
        return true;
      }
    },
    paytime(time) {
      return time + 900000 - Date.now();
    },
    myoredr() {
      $axios.get("http://zl.huruqing.cn:3003/order/all").then((res) => {
        this.List = res.list;
        console.log(this.List);
        this.List.forEach((item, index) => {
          if (item.orderStatus == "02") {
            this.Nopay.push(item);
          }
        });
      });
    },
    isorder(item) {
      this.$router.push({
        path: "/isorder",
        query: {
          imgUrl: item.carts[0].imgUrl,
          masterName: item.carts[0].masterName,
          buyNum: item.carts[0].buyNum,
          price: item.carts[0].price,
          total: (item.carts[0].buyNum * item.carts[0].price) / 100,
        },
      });
    },
  },
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
body {
  background-color: rgb(244, 244, 244);
}
span {
  background-color: white;
}
.top {
  height: 46px;
  display: flex;
  align-items: center;
  width: 100%;
  background-color: white;
}
.top span {
  flex-grow: 1;
  text-align: center;
  padding-right: 50px;
  background-color: white;
}
.top img {
  margin-left: 20px;
  background-color: white;
}
.menu {
  position: fixed;
  height: 40px;
  background-color: white;
  width: 100%;
  margin-top: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  top: 0%;
}

.menu span {
  color: rgb(125, 126, 128);
  font-size: 14px;
}
.menu .box {
  height: 44px;
  line-height: 44px;
  border-bottom: 3px solid rgb(192, 49, 49);
  background-color: white;
  width: 44px;
  text-align: center;
}
.test {
  height: 196px;
  padding: 0 15px 15px;
  background-color: white;
  margin-top: 10px;
}
.top1 img {
  height: 70px;
  background-color: white;
}
.test .top1 {
  width: 270px;
  display: flex;
  align-items: center;
  background-color: white;
  border-bottom: 1px solid rgb(244, 244, 244);
  overflow: hidden;
}
.test .top1 .right {
  flex-grow: 1;
  flex-direction: column;
  display: flex;
  height: 68px;
  justify-content: space-between;
  background-color: white;
}
.bottom {
  display: flex;
  justify-content: space-between;
  background-color: white;
}
.minten {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: right;
  background-color: white;
  border-bottom: 1px solid rgb(244, 244, 244);
}
.test .bootom {
  display: flex;
  justify-content: space-between;
  height: 40px;
  padding-top: 10px;
  align-items: center;
  background-color: white;
}
.da {
  height: 25px;
}
a {
  text-decoration: none;
  color: black;
  background-color: white;
}
</style>